<template>
  <main>
    <div class="bottom-buttons">
      <button @click="jump('src/page/home/index.html')" class="backHomeBtn">返回首页</button>
    </div>
    <button @click="toggleAdvancedSearch" class="toggleAdvancedSearchBtn">
      {{ isAdvancedSearch ? '收起高级搜索' : '展开高级搜索' }}
    </button>
    <h4 class="searchHint">输入你需要检索的内容:</h4>
    <label class="resourceNameLabel">资源名称:</label>
    <input type="text" v-model="selectResource.name" class="resourceNameInput"><br>
    <label class="resourceManufacturerLabel">资源厂家:</label>
    <input type="text" v-model="selectResource.manufacturer" class="resourceManufacturerInput"><br>

    <!-- 高级搜索部分 -->
    <div v-show="isAdvancedSearch" class="advancedSearchSection">
      <label class="advancedSearchTypeLabel">资源类别:
        <select v-model="selectResource.type" class="advancedSearchTypeSelect">
          <option v-for="type in typeSelectList" :key="type" :value="type">{{ type }}</option>
          <option value="null"> 不限</option>
        </select>
      </label>
      <br>
      <span class="advancedSearchTagCountHint">至少需要包含的标签(tag)数量:</span>
      <button @click="updateTagSize(1)" class="tagSizeIncreaseBtn">+</button>
      <span class="tagSizeDisplay">{{ selectResource.tagSize }}</span>
      <button @click="updateTagSize(-1)" class="tagSizeDecreaseBtn">-</button>
      <br>
      <p class="selectedTagCountHint">当前已选择标签数量:{{ selectResource.tagList.length }}</p>
      <button @click="clsSelectTag" class="resetTagBtn">重置标签选项</button>
      <br>
      <span class="advancedSearchTagTitle">资源标签(tag):</span>
      <div class="tagTableContainer">
        <table>
          <tr v-for="row in Math.ceil(tagList.length / 5)" :key="'row-' + row">
            <td v-for="col in 5" :key="'tag-' + (row-1)*5 + (col-1)">
              <template v-if="tagList[(row-1)*5 + (col-1)]">
                <label :for="'tag_' + tagList[(row-1)*5 + (col-1)].tagId">
                  <input
                      type="checkbox"
                      :id="'tag_' + tagList[(row-1)*5 + (col-1)].tagId"
                      v-model="selectResource.tagList"
                      :value="tagList[(row-1)*5 + (col-1)].tagId"
                  />

                  {{ tagList[(row - 1) * 5 + (col - 1)].tagId }}:
                  {{ tagList[(row - 1) * 5 + (col - 1)].tagName }}
                </label>
              </template>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <button @click="triggerSearch" class="triggerSearchBtn">搜索</button>

    <!-- 搜索结果 -->
    <div v-if="hasResource && viewResourcesList.length > 0">
      <div class="list-container">
        <div v-for="resource in viewResourcesList" :key="resource.rId" class="resourceItem">
          <hr/>
          <h2 class="resourceTitle">{{ resource.rName }}</h2>

          <div class="resourceTagContainer">
          <span
              v-for="tag in resource.tags"
              :key="tag.tagId"
              class="resourceTag"
          >
            {{ tag.tagName }}
          </span>
          </div>

          <!-- 资源预览图 -->
          <div v-if="resource.rJpeg && resource.rJpeg !== 'null' && resource.rJpeg !== ''" class="resourceJpeg">
            <img :src="`${project}img/${resource.rJpeg}`" alt="首页图片加载失败"/>
          </div>
          <div v-else class="resourceJpeg">
            <h2 class="resourceNoPreviewHint">该资源没有设置预览图</h2>
          </div>

          <!-- 查看详情 -->
          <div class="resourceDetailBtnContainer">
            <button @click="selectResourceMxg(resource.rId)" class="resourceDetailBtn">查看详情</button>
          </div>
          <hr/>
        </div>

        <!-- 分页 -->
        <div class="resourcePageControlContainer">
          <button @click="changePage(-1)" class="indexButton" :disabled="index === 1">上一页</button>
          <button @click="changePage(1)" class="indexButton" :disabled="index === totalPages">下一页</button>
          <label class="pageSizeLabel">每页显示条数:{{ maxSize }}</label>
          <p class="pageInfoText">当前页数: {{ index }}，一共 {{ allSize }} 条记录，一共 {{ totalPages }} 页</p>
        </div>
      </div>
    </div>

    <!-- 初始状态 -->
    <div v-else-if="isInitial" class="searchInitialContainer">
      <h2 class="searchInitialHint">输入你需要搜索的内容吧,搜索结果将会在这里显示</h2>
    </div>

    <!-- 空结果 -->
    <div v-else class="searchEmptyContainer">
      <h2 class="searchEmptyHint">这里没有任何资源!重新搜索一下试试吧</h2>
    </div>
  </main>
  <Bottom/>
</template>
<script setup lang="ts">
import {computed, ref} from 'vue'
import {globalConst} from '@constants/globalConst.js'
import {Resources} from '@models/Resources.js'
import {jump, jumpInNewTab} from '@utils/router.js'
import {isNull} from '@utils/stringUtil.js'
import axiosInstance from '@utils/axiosInstance.js'
import ResponseResult from '@models/ReturnResult.js'
import type {Tag} from '@models/Tag.js'
import {getData, saveData} from '@stores/dataStorage.js'
import Bottom from "@components/bottom.vue";

// 防抖函数
const useDebounce = (fn: Function, delay: number) => {
  let timer: ReturnType<typeof setTimeout> | null = null
  return function (this: any, ...args: any[]) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

interface SelectResourcesMsg {
  name: string
  tagList: number[]
  manufacturer: string
  type: string
  tagSize: number
}

const project = globalConst.staticResourceUrl
const viewResourcesList = ref<Resources[]>([])
const cachedPages = ref<{ [page: number]: Resources[] }>({})
const index = ref(1)
const hasResource = ref(false)
const allSize = ref(0)
const maxSize = ref(5)
const isLoading = ref(false)
const totalPages = computed(() => Math.ceil(allSize.value / maxSize.value))
const tagList = ref<Tag[]>([])
const selectResource = ref<SelectResourcesMsg>({
  name: '',
  tagList: [],
  manufacturer: '',
  type: '',
  tagSize: 0
})
const isInitial = ref(true)
const isAdvancedSearch = ref(false)

// 防抖搜索
const debouncedSearch = useDebounce(() => {
  searchResources(1, true)
}, 500)

function getSearchParams(page: number) {
  return {
    tagList: selectResource.value.tagList,
    tagSize: selectResource.value.tagSize,
    name: selectResource.value.name,
    type: isNull(selectResource.value.type) ? '' : selectResource.value.type,
    manufacturer: selectResource.value.manufacturer,
    size: maxSize.value,
    page: page
  }
}

// 获取指定页数据（先查缓存）
async function getPageData(page: number) {
  if (cachedPages.value[page]) {
    viewResourcesList.value = cachedPages.value[page]
    hasResource.value = viewResourcesList.value.length > 0
    index.value = page
    return
  }
  await searchResources(page, false)
  index.value = page
}

// 翻页
async function changePage(direction: number) {
  if (isLoading.value) return
  const newIndex = index.value + direction
  if (newIndex < 1 || newIndex > totalPages.value) return
  await getPageData(newIndex)
}

// 查看详情
function selectResourceMxg(rid: number) {
  jumpInNewTab(`/src/page/resourceMsg/index.html?rId=${rid}`)
}

function checkAllSearchConditionsEmpty() {
  // 获取搜索条件对象（避免直接修改原对象，这里做非空处理）
  // 检查各个条件是否为空
  const isNameEmpty = isNull(selectResource.value.name);
  const isManufacturerEmpty = isNull(selectResource.value.manufacturer);
  const isTypeEmpty = isNull(selectResource.value.type) || selectResource.value.type === 'null'; // 包含"不限"的情况
  const isTagListEmpty = isNull(selectResource.value.tagList);
  // 所有传给后端的参数均为空时返回true
  return isNameEmpty && isManufacturerEmpty && isTypeEmpty && isTagListEmpty;
}

// 搜索
async function searchResources(page: number, isNewSearch: boolean) {
  if (isLoading.value) return
  isLoading.value = true
  try {
    if (isNewSearch) {
      const sizeResponse = await axiosInstance.post(
          `${globalConst.baseUrl}select/getSelectResourcesSize`,
          getSearchParams(1)
      )
      const sizeResult = ResponseResult.fromApiResponse<number>(sizeResponse.data)
      if (sizeResult.isSuccess() || sizeResult.returnResult === 0) {
        allSize.value = sizeResult.returnResult
      } else {
        alert(sizeResult.msg)
        hasResource.value = false
        return
      }
      page = 1
      index.value = 1
      cachedPages.value = {} // 新搜索清空缓存
    }

    const response = await axiosInstance.post(
        `${globalConst.baseUrl}select/selectResources`,
        getSearchParams(page)
    )
    const result = ResponseResult.fromApiResponse(response.data)
    isInitial.value = false

    if (result.isSuccess()) {
      const data = result.returnResults || []
      // 缓存当前页
      cachedPages.value[page] = data
      // 当前显示
      viewResourcesList.value = data
      hasResource.value = data.length > 0
    } else {
      hasResource.value = false
    }
  } catch (error) {
    console.error('搜索失败:', error)
    hasResource.value = false
  } finally {
    isLoading.value = false
  }
}

// 触发搜索（防抖）
function triggerSearch() {
  if (checkAllSearchConditionsEmpty()) {
    alert('请输入至少一个检索条件!')
    return
  }
  debouncedSearch()
}

// 展开/收起高级搜索
async function toggleAdvancedSearch() {
  clsSelectTag()
  if (isLoading.value) return
  isAdvancedSearch.value = !isAdvancedSearch.value

  if (!isAdvancedSearch.value) return

  isLoading.value = true
  try {
    let tags = getData('tagList')
    if (isNull(tags)) {
      const response = await axiosInstance.get(`${globalConst.baseUrl}select/getTag`)
      const r = ResponseResult.fromApiResponse(response.data)
      if (r.isSuccess()) {
        tags = r.returnResults
        saveData('tagList', tags)
      } else {
        alert('搜索页面加载失败!' + r.msg)
        isAdvancedSearch.value = false
        return
      }
    }
    if (!tags || tags.length === 0) {
      alert('搜索页面标签部分加载失败!')
      isAdvancedSearch.value = false
      return
    }
    tags.sort((a: Tag, b: Tag) => a.tagId - b.tagId)
    tagList.value = tags
    axiosInstance.get(`${globalConst.baseUrl}select/getTypeMsg`).then(
        (r) => {
          const ref = ResponseResult.fromApiResponse<string>(r.data);
          if (ref.isSuccess()) {
            typeSelectList.value = ref.returnResults
          } else {
            alert('搜索页面加载失败!' + ref.msg)
            isAdvancedSearch.value = false
            return
          }
        }
    )
  } catch (error) {
    console.error('加载标签失败:', error)
    alert('加载标签失败，请稍后重试')
    isAdvancedSearch.value = false
  } finally {
    isLoading.value = false
  }
}

// 更新 tagSize
function updateTagSize(size: number) {
  const newSize = selectResource.value.tagSize + size
  if (newSize < 0) {
    alert('无效的Tag数量调整')
    return
  }
  if (newSize > selectResource.value.tagList.length) {
    alert('需要的标签数量不能大于已选择的标签数量!')
    return
  }
  selectResource.value.tagSize = newSize
}

function clsSelectTag() {
  selectResource.value.tagList = []
  selectResource.value.tagSize = 0
}

const typeSelectList = ref<string[]>([])

</script>
<style scoped>
/* 主容器样式 - 继承main标签的基础样式 */
main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

/* 底部按钮容器 */
.bottom-buttons {
  position: sticky;
  bottom: 2rem;
  display: flex;
  justify-content: flex-start;
  z-index: 100;
}

/* 返回首页按钮 */
.backHomeBtn {
  align-self: flex-start;
  padding: 0.8em 1.6em;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 168, 255, 0.3);
}

.backHomeBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.backHomeBtn:hover::before {
  left: 100%;
}

.backHomeBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 168, 255, 0.5);
  border-color: var(--accent-blue-light);
}

/* 高级搜索切换按钮 */
.toggleAdvancedSearchBtn {
  align-self: flex-start;
  padding: 0.7em 1.4em;
  border-radius: 12px;
  border: 2px solid var(--secondary-gray);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.toggleAdvancedSearchBtn:hover {
  background: var(--secondary-gray-light);
  color: var(--text-primary);
  border-color: var(--primary-purple);
  box-shadow: 0 0 12px rgba(211, 54, 255, 0.3);
}

/* 搜索提示文字 */
.searchHint {
  font-size: 1.3em;
  color: var(--text-primary);
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 8px rgba(255, 42, 109, 0.3);
}

/* 表单标签样式 */
.resourceNameLabel,
.resourceManufacturerLabel,
.advancedSearchTypeLabel,
.advancedSearchTagCountHint,
.advancedSearchTagTitle {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 1em;
}

/* 输入框样式 */
.resourceNameInput,
.resourceManufacturerInput {
  width: 100%;
  max-width: 400px;
  padding: 0.8em 1em;
  border: 2px solid var(--secondary-gray);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1em;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.resourceNameInput:focus,
.resourceManufacturerInput:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 10px rgba(211, 54, 255, 0.3);
}

/* 高级搜索区域 */
.advancedSearchSection {
  background: rgba(42, 42, 42, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 1rem 0;
  border: 1px solid rgba(255, 42, 109, 0.2);
  box-shadow: var(--shadow-secondary);
  animation: fadeIn 0.5s ease-out;
}

/* 下拉选择框 */
.advancedSearchTypeSelect {
  background: var(--bg-secondary);
  border: 2px solid var(--secondary-gray);
  border-radius: 8px;
  padding: 0.6em 1em;
  color: var(--text-primary);
  font-size: 1em;
  margin-left: 0.5rem;
  transition: all 0.3s ease;
}

.advancedSearchTypeSelect:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 8px rgba(211, 54, 255, 0.3);
}

/* 标签数量控制 */
.tagSizeDisplay {
  display: inline-block;
  padding: 0.3em 0.8em;
  margin: 0 0.5rem;
  background: var(--secondary-gray);
  color: var(--text-primary);
  border-radius: 8px;
  font-weight: 600;
  min-width: 3em;
  text-align: center;
}

.tagSizeIncreaseBtn,
.tagSizeDecreaseBtn {
  padding: 0.4em 0.8em;
  border-radius: 8px;
  border: 2px solid var(--secondary-gray);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.tagSizeIncreaseBtn:hover,
.tagSizeDecreaseBtn:hover {
  background: var(--primary-red);
  border-color: var(--primary-red-light);
  transform: scale(1.05);
}

/* 标签选择提示 */
.selectedTagCountHint {
  color: var(--text-muted);
  font-size: 0.9em;
  margin: 0.8rem 0;
}

/* 重置标签按钮 */
.resetTagBtn {
  padding: 0.5em 1em;
  border-radius: 8px;
  border: 2px solid var(--secondary-gray);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.resetTagBtn:hover {
  background: var(--primary-red);
  color: var(--text-primary);
  border-color: var(--primary-red-light);
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.3);
}

/* 标签表格容器 */
.tagTableContainer {
  background: rgba(26, 26, 26, 0.8);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
  border: 1px solid var(--border-secondary);
  max-height: 300px;
  overflow-y: auto;
}

.tagTableContainer table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tagTableContainer tr {
  transition: all 0.3s ease;
}

.tagTableContainer tr:hover {
  background: rgba(255, 42, 109, 0.05);
}

.tagTableContainer td {
  padding: 0.8rem 0.5rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

/* 添加更明显的分割线 */
.tagTableContainer td::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: linear-gradient(to bottom,
  transparent,
  rgba(255, 42, 109, 0.3),
  transparent);
}

/* 移除最后一列的分割线 */
.tagTableContainer td:last-child::after {
  display: none;
}

.tagTableContainer label {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-secondary);
  min-height: 44px;
  width: 100%;
  position: relative;
}

/* 复选框样式优化 */
.tagTableContainer input[type="checkbox"] {
  margin-right: 0.8rem;
  accent-color: var(--primary-red);
  transform: scale(1.1);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* 标签文字样式 - 占据主要空间 */
.tagTableContainer label span {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.95em;
  line-height: 1.4;
  word-break: break-word;
}

/* 悬停状态优化 */
.tagTableContainer label:hover {
  background: rgba(255, 42, 109, 0.15);
  color: var(--text-primary);
  transform: translateX(4px);
  border-left: 3px solid var(--primary-red);
}

/* 选中状态 */
.tagTableContainer input[type="checkbox"]:checked + span {
  color: var(--primary-red-light);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 42, 109, 0.3);
}

.tagTableContainer input[type="checkbox"]:checked ~ label {
  background: rgba(255, 42, 109, 0.2);
  border-left: 3px solid var(--primary-red);
}

/* 网格布局优化 - 确保5列均匀分布 */
.tagTableContainer td {
  width: 20%; /* 5列平均分布 */
  text-align: left;
}

/* 搜索按钮 */
.triggerSearchBtn {
  padding: 0.8em 2em;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  color: var(--text-primary);
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-primary);
  align-self: flex-start;
}

.triggerSearchBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.triggerSearchBtn:hover::before {
  left: 100%;
}

.triggerSearchBtn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  border-color: var(--primary-red-light);
}

/* 搜索结果列表容器 */
.list-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  border-radius: 16px;
  background: rgba(26, 26, 26, 0.35);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 30px rgba(255, 42, 109, 0.1);
  border: 1px solid rgba(255, 42, 109, 0.2);
  animation: fadeIn 0.8s ease-out;
  margin-top: 1rem;
}

/* 资源项样式 - 与模板保持一致 */
.resourceItem {
  background: rgba(42, 42, 42, 0.35);
  backdrop-filter: blur(5px);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(255, 42, 109, 0.1);
  border: 1px solid rgba(255, 42, 109, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.resourceItem:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-primary);
  border-color: var(--border-primary);
}

.resourceTitle {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 0.8rem;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(255, 42, 109, 0.3);
}

.resourceTagContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.resourceTag {
  display: inline-block;
  padding: 0.3em 0.7em;
  border-radius: 20px;
  background: var(--secondary-gray);
  color: var(--text-primary);
  font-size: 0.8em;
  font-weight: 500;
  transition: all 0.3s ease;
}

.resourceTag:hover {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.3);
  transform: scale(1.05);
}

.resourceJpeg img {
  width: 80%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(255, 42, 109, 0.2);
  transition: all 0.3s ease;
  display: block;
  margin: 0 auto;
}

.resourceJpeg img:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-glow);
}

.resourceNoPreviewHint {
  color: var(--text-muted);
  font-size: 1.1em;
  text-align: center;
  padding: 2rem;
}

.resourceDetailBtn {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  border-radius: 12px;
  padding: 0.5em 1.2em;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.resourceDetailBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.resourceDetailBtn:hover::before {
  left: 100%;
}

.resourceDetailBtn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

/* 分页控件 */
.resourcePageControlContainer {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}

.indexButton {
  padding: 0.6em 1.4em;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 0.5rem;
}

.indexButton:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.indexButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.pageSizeLabel {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin: 0 1rem;
}

.pageInfoText {
  font-size: 0.85em;
  color: var(--text-muted);
  text-align: center;
}

/* 初始状态和空状态容器 */
.searchInitialContainer,
.searchEmptyContainer {
  padding: 3rem;
  text-align: center;
  background: rgba(42, 42, 42, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 42, 109, 0.2);
  margin-top: 1rem;
}

.searchInitialHint,
.searchEmptyHint {
  font-size: 1.2em;
  color: var(--text-secondary);
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 响应式设计 */
/* 响应式调整 */
@media (max-width: 1024px) {
  .tagTableContainer td {
    width: 25%; /* 平板端改为4列 */
  }

  .tagTableContainer tr td:nth-child(5) {
    display: none; /* 隐藏第5列 */
  }
}

@media (max-width: 768px) {
  .tagTableContainer td {
    width: 33.33%; /* 移动端改为3列 */
  }

  .tagTableContainer tr td:nth-child(4),
  .tagTableContainer tr td:nth-child(5) {
    display: none; /* 隐藏第4、5列 */
  }

  .tagTableContainer label {
    padding: 0.4rem 0.6rem;
    min-height: 40px;
  }
}

@media (max-width: 480px) {
  .tagTableContainer td {
    width: 50%; /* 小屏改为2列 */
  }

  .tagTableContainer tr td:nth-child(3),
  .tagTableContainer tr td:nth-child(4),
  .tagTableContainer tr td:nth-child(5) {
    display: none; /* 只显示前2列 */
  }

  .tagTableContainer {
    padding: 1rem;
    max-height: 250px;
  }
}

/* 添加滚动条样式以匹配设计系统 */
.tagTableContainer::-webkit-scrollbar {
  width: 6px;
}

.tagTableContainer::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.tagTableContainer::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  border-radius: 3px;
}

.tagTableContainer::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--primary-red-light), var(--primary-purple-light));
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
